<template>
  <view class="container">
    <view class="form-item">
      <text class="label">姓氏：</text>
      <input v-model="passengerSurname" placeholder="请输入姓" />
    </view>
    <view class="form-item">
      <text class="label">名字：</text>
      <input v-model="passengerName" placeholder="请输入名字" />
    </view>
    <view class="form-item">
      <text class="label">性别：</text>
      <picker mode="selector" :range="genderOptions" :value="genderIndex" @change="handleGenderChange">
        <text>{{ genderOptions[genderIndex] }}</text>
      </picker>
    </view>
    <button class="submit-btn" @click="handleSubmit">提交</button>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { useStore } from 'vuex';

  const $store = useStore();

  const passengerSurname = ref('');
  const passengerName = ref('');
  const genderOptions = ['未知', '男', '女'];
  const genderIndex = ref(0);


// 从store中获取默认值
  const userInfo = $store.state.userInfo;
  passengerSurname.value = userInfo.passengerSurname || '';
  passengerName.value = userInfo.passengerName || '';
  genderIndex.value = userInfo.passengerGender || 0;

  const handleGenderChange = (event) => {
    genderIndex.value = event.detail.value;
  };

  const handleSubmit = () => {
    const data = {
      passengerSurname: passengerSurname.value,
      passengerName: passengerName.value,
      passengerGender: genderIndex.value
    };
    // 更新store中的信息
    $store.commit('setUserInfo', {
      passengerSurname: passengerSurname.value,
      passengerName: passengerName.value,
      passengerGender: genderIndex.value,
	  gmtCreate: userInfo.gmtCreate,
	  gmtModified: userInfo.gmtModified,
	  id: userInfo.id,
	  passengerPhone: userInfo.passengerPhone,
	  profilePhoto: userInfo.profilePhoto,
	  state: userInfo.state
    });
    // 提交数据逻辑
    console.log(data);
  };
</script>

<style scoped>
  .container {
    padding: 20px;
  }

  .form-item {
    margin-bottom: 20px;
   /* display: flex;
    align-items: center; */
  }

  .label {
    width: 80px;
  }

  input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  picker {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .submit-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
